import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import useParkStore from "@/pinia/store/parkStore/parkStore.ts";

type EChartsOption = echarts.EChartsOption;

const initBarChart = (container: HTMLDivElement) => {
  const parkStore = useParkStore();
  const { parkIncome } = storeToRefs(parkStore);
  const barOptions: EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10px",
      left: "0px",
      right: "0px",
      bottom: "0px",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
          show: false,
        },
        data: parkIncome?.value?.xMonth,
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "园区年度收入",
        type: "bar",
        barWidth: "10px",
        data: parkIncome?.value?.yIncome.map((item, index) => {
          const color = index % 2 === 0
            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0.23, color: "#74c0f8" },
              { offset: 1, color: "rgba(116,192,248,0.00)" },
            ])
            : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0.23, color: "#ff7152" },
              { offset: 1, color: "rgba(255,113,82,0.00)" },
            ]);
          return { value: item, itemStyle: { color } };
        }),
      },
    ],
    textStyle: {
      color: "#B4C0CC",
    },
  };

  const myBarChart = echarts.init(container);

  myBarChart.setOption(barOptions);
};

export default initBarChart;
